<template>
	<view class="theme">
		<swiper circular :current="currentIndex" @change="swpierChange">
			<swiper-item v-for="(item,index) in classList" :key="item._id">
				<image v-if="readImage.includes(index)" @click="changeMask" :src="item.picurl" mode="aspectFill">
				</image>
			</swiper-item>
		</swiper>
		<!-- 	//遮罩层 -->
		<view class="mask" v-if="isHidden">
			<view class="goback" style="margin-top: 45px;" @click="goBack">
				<uni-icons type="left" size="30"></uni-icons>
			</view>
			<view class="count">{{currentIndex+1}} / {{classList.length}}</view>
			<view class="time">
				<uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
			</view>
			<view class="date">
				<uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
			</view>
			<view class="footer">
				<view class="box" @click="changeInfo">
					<uni-icons type="info" size="30"></uni-icons>
					<text>信息</text>
				</view>
				<view class="box" @click="changeScore">
					<uni-icons type="star" size="30"></uni-icons>
					<text>{{currentInfo.score}}分</text>
				</view>
				<view class="box" @click="clickDownloads">
					<uni-icons type="download" size="30"></uni-icons>
					<text>下载</text>
				</view>
			</view>
		</view>
		<!-- 打开弹窗信息详情 -->
		<uni-popup ref="infopopup" type="bottom" :safe-area="false">
			<view class="popupInfo">
				<view class="header">
					<view></view>
					<view class="title">壁纸信息</view>
					<view class="close">
						<uni-icons type="closeempty" size="20" color="#676767" @click="closeInfo"></uni-icons>
					</view>
				</view>

				<scroll-view scroll-y="true">
					<view class="content">
						<view class="row">
							<view class="label">壁纸ID:</view>
							<text class="value" selectable>{{currentInfo._id}}</text>
						</view>
						<view class="row">
							<view class="label">发文者：</view>
							<text class="value">{{currentInfo.nickname}}</text>
						</view>
						<view class="row">
							<view class="label">评分:</view>
							<view class="value" style="display: flex;">
								<uni-rate :value="currentInfo.score" readonly allowHalf />
								<text>{{currentInfo.score}}分</text>
							</view>
						</view>
						<view class="row">
							<view class="label">标签：</view>
							<view class="value tabs" v-for="tab in currentInfo.tabs" :key="tab.index">
								<view >{{tab}}</view>
							</view>
						</view>

						<view class="row">
							<view class="label">摘要：</view>
							<text class="value">{{currentInfo.description}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 打开评分的弹窗 -->
		<uni-popup ref="scorepopup" :is-mask-click="false">
			<view class="scorepopup">
				<view class="header">
					<view></view>
					<view class="title">{{isScore? '已经评分了':'壁纸评分'}}</view>
					<view class="close">
						<uni-icons type="closeempty" size="20" color="#676767" @click="closeScore"></uni-icons>
					</view>
				</view>

				<view class="content">
					<uni-rate v-model="scoreValue" allowHalf :disabled="isScore" disabled-color="#ffff00" />
					<text class="text">{{scoreValue}}分</text>
					<!-- 评分过了就禁用更改评分 -->
				</view>

				<view class="footer">
					<!-- 未评分的时候或者已经评分了都禁用按钮 -->
					<button type="default" size="mini" plain :disabled="!scoreValue || isScore"
						@click="submitScore">确认评分</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	const classList = ref([])
	const scoreValue = ref(0)
	const isHidden = ref(true)
	const infopopup = ref(null)
	const scorepopup = ref(null)
	const currentId = ref(null)
	const currentIndex = ref(0)
	const readImage = ref([])
	const currentInfo = ref([])
	const isScore = ref(false)
	//返回上一层
	const goBack = () => {
		uni.navigateBack({
			fail: () => {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		})

	}
	//改变遮罩层的状态
	const changeMask = () => {
		isHidden.value = !isHidden.value
	}
	//打开信息弹窗
	const changeInfo = () => {
		infopopup.value.open()
	}
	//关闭弹窗
	const closeInfo = () => {
		infopopup.value.close()
	}
	//打开评分弹窗
	const changeScore = () => {
		if (currentInfo.value.userScore) {
			//接口里面有用户的评分时就把isScore的值更改为true
			isScore.value = true
			//把接口的数据赋值给用户的评分
			scoreValue.value = currentInfo.value.userScore
		}
		scorepopup.value.open()
	}
	//关闭评分弹窗
	const closeScore = () => {
		scorepopup.value.close()
		//清空评分数据
		scoreValue.value = 0
		isScore.value = false
	}
	//提交评分按钮
	const submitScore = async () => {
		uni.showLoading({
			title: '数据加载中...'
		})
		//scoreValue.value双向拿到用户的评分值
		const {
			classid,
			_id: wallId
		} = currentInfo.value
		const res = await uni.request({
			url: "https://tea.qingnian8.com/api/bizhi/setupScore",
			header: {
				"access-key": "238762"
			},
			data: {
				classid,
				wallId,
				userScore: scoreValue.value
			}
		})
		uni.hideLoading()
		//评分成功，接口值为0时
		if (res.data.errCode === 0) {
			uni.showToast({
				title: '评分成功',
				icon: null
			})
			//将用户评分的值scoreValue.value存入到接口userScore中，再利用缓存来刷新	
			classList.value[currentIndex.value].userScore = scoreValue.value
			uni.setStorageSync('storagClasslist', classList.value)
			//评分成功之后关闭评分弹窗
			closeScore()
		}
	}
	//获取本地缓存数据
	const storagClassList = uni.getStorageSync('storagClasslist') || []
	classList.value = storagClassList.map((item) => {
		return {
			...item,
			picurl: item.smallPicurl.replace("_small.webp", '.jpg')
		}
	})
	//获取分类传递的参数
	onLoad(async (e) => {
		// 分类页面传递过来的参数id
		currentId.value = e.id
		//获取的是分享页面就从重新获取个人壁纸的接口，不从缓存获取
		if (e.type == 'share') {
			const res = await uni.request({
				url: "https://tea.qingnian8.com/api/bizhi/detailWall",
				header: {
					"access-key": "238762"
				},
				data: {
					id: currentId.value
				}
			})
			classList.value = res.data.data.map((item) => {
				return {
					...item,
					picurl: item.smallPicurl.replace("_small.webp", '.jpg')
				}
			})
		}
		currentIndex.value = classList.value.findIndex((item) => {
			// 判断接口传递的id和分类传来的参数id是否一致
			return item._id == currentId.value
		})
		//把拿到的索引值放进这个数组里
		readImage.value.push(
		readImage.value.push(
		currentIndex.value <= 0 ? classList.value.length - 1 : currentIndex.value - 1,
		currentIndex.value,
		currentIndex.value >= classList.value.length - 1 ? 0 : currentIndex.value + 1
		)
		);
		//根据数组的中的索引值拿到数据信息
		currentInfo.value = classList.value[currentIndex.value]
	})
	
	
	//滑动图片动态获取索引值
	const swpierChange = (e) => {
		//current是当前滑动页面的索引值，e就是获得滑动图片的索引,把索引值赋值给页面展示的数字
		currentIndex.value = e.detail.current
		readImage.value.push(
		currentIndex.value <= 0 ? classList.value.length - 1 : currentIndex.value - 1,
			currentIndex.value,
		currentIndex.value >= classList.value.length - 1 ? 0 : currentIndex.value + 1
		)
	}
	//下载图片事件
	const clickDownloads = () => {
		// #ifdef H5
		uni.showModal({
			content: "请长按图片保存",
			showCancel: false
		})

		// #endif
		// #ifndef H5

		//获取动态数据图片
		uni.getImageInfo({
			src: currentInfo.value.picurl,
			success: (res) => {
				//保存图片
				uni.saveImageToPhotosAlbum({
				 	filePath:res.path,
				 	success: (res) => {
						console.log(res);
				 	}
				 })
			}
		})

		// #endif
	}

	//分享朋友和朋友圈
	onShareAppMessage(() => {
		//分享朋友时候传递id和名称
		return {
			title: '小方图片~',
			path: "/pages/theme/theme?id=" + currentId.value + "&type=share"
		}
	})
</script>

<style lang="scss" scoped>
	//公共样式
	.header {
		display: flex;
		justify-content: space-between;

		.title {
			color: #676767;
			font-size: 30rpx;
		}

		.close {
			padding: 6rpx;
		}

	}

	.theme {
		position: relative;
		width: 100%;
		height: 100vh;

		swiper {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mask {
			&>view {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				color: #fff;
				width: fit-content;
			}

			.goback {
				width: 38px;
				height: 38px;
				backdrop-filter: blur(10rpx);
				top: 0;
				left: 30rpx;
				margin-left: 0;
			}

			.count {
				top: 10vh;
				background: rgba(0, 0, 0, 0.5);
				padding: 20rpx 40rpx;
				border-radius: 40rpx;
				backdrop-filter: blur(10rpx);
				font-size: 40rpx;
			}

			.time {
				top: calc(10vh + 80rpx);
				font-size: 140rpx;
			}

			.date {
				font-size: 50rpx;
				top: calc(10vh + 250rpx);
			}

			.footer {
				bottom: 10vh;
				background: #fff;
				padding: 10rpx;
				width: 65vw;
				height: 120rpx;
				border-radius: 120rpx;
				color: #000;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.box {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}

		.popupInfo {
		    background-color: #fff;
		    border-radius: 30rpx 30rpx 0 0;
		    padding: 30rpx;
		
		    scroll-view {
		        max-height: 60vh;
		
		        .content {
		            .row {
		                display: flex;
		                padding: 20rpx 0;
		                font-size: 30rpx;
		
		                .label {
		                    width: 140rpx;
		                    color: #676767;
		                    text-align: center;
		                }
		
		                .value {
		                    flex: 1;
		                    width: 0;
		                }
		            } // .row
		        } // .content
		    } // scroll-view
		} // .popupInfo

		.scorepopup {
			background: #fff;
			border-radius: 30rpx;
			padding: 30rpx;
			width: 60vw;

			.content {
				padding: 30rpx;
				display: flex;
				justify-content: center;

				.text {
					color: #ffff00;
					text-align: left;
					padding-left: 10rpx;
				}
			}

			.footer {
				padding: 10px 0;
				display: flex;
				justify-content: center;
				align-items: center;

			}
		}
	}
</style>